<template>
  <div class="facebook-login">
    <el-button-group>
      <el-button type="primary"
                 size="small" @click="buttonClicked">
        <!--      <i class="spinner" v-if="isWorking"></i>-->
        <!--      <img :src="icon" v-if="!isWorking">-->
        {{ getButtonText }}
      </el-button>
<!--      <el-button v-if="isConnected" type="primary"-->
<!--                 size="small" plain @click="getAdsAccount">-->
<!--        获取广告账户-->
<!--      </el-button>-->
    </el-button-group>
  </div>
</template>

<script>
import {
  loadFbSdk,
  getFbLoginStatus,
  fbLogout,
  fbLogin,
  api
} from './helpers.js'
import icon from './icon.png'

export default {
  name: 'facebook-login',
  props: {
    id: {
      type: String,
      required: false,
      default: 'facebook-login'
    },
    appId: {
      type: String,
      required: true
    },
    version: {
      type: String,
      default: 'v14.0'
    },
    logoutLabel: {
      type: String,
      default: 'Logout'
    },
    loginLabel: {
      type: String,
      default: 'Login'
    },
    loginOptions: {
      type: Object,
      default: function () {
        return {
          scope: 'email'
        }
      }
    }
  },
  data() {
    return {
      isWorking: false,
      isConnected: false,
      icon
    }
  },
  mounted() {
    this.isWorking = true
    loadFbSdk(this.appId, this.version)
      .then(getFbLoginStatus)
      .then(response => {
        console.log(response)
        if (response.status === 'connected') {
          this.isConnected = true
        }
        this.isWorking = false
        /** Event `get-initial-status` to be deprecated in next major version! */
        this.$emit('get-initial-status', response)
        this.$emit('sdk-loaded', {
          isConnected: this.isConnected,
          FB: window.FB
        })
      })
  },
  computed: {
    getButtonText() {
      switch (this.isConnected) {
        case true:
          return this.logoutLabel
        case false:
          return this.loginLabel
        default:
          return 'this is default'
      }
    }
  },
  methods: {
    buttonClicked() {
      this.$emit('click')
      if (this.isConnected) {
        this.logout()
      } else {
        this.login()
      }
    },
    login() {
      this.isWorking = true
      fbLogin(this.loginOptions)
        .then(response => {
          this.isConnected = response.status === 'connected';
          this.isWorking = false
          this.$emit('login', {
            isConnected: this.isConnected,
            response
          })
        })
    },
    logout() {
      this.isWorking = true
      fbLogout()
        .then(response => {
            this.isWorking = false
            this.isConnected = false
            this.$emit('logout', {
              isConnected: this.isConnected,
              response
            })
          }
        )
    },
    getAdsAccount() {
      return api('/me/adaccounts', 'GET', {fields: 'id,account_id,account_status,name', limit: 3000})
    }
  }
}
</script>

<style scoped>
</style>
